@use "../../assets/scss/mixins/base" as mx;

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vw;
  font-size: 1vw;
}
$bg-height: 60em;

// 灯
$lamp-top: 5em;
$lamp-width: 10em;
$lamp-height: 3em;

// 灯绳子
$lamp-cord-width: 10px;
$lamp-cord-height: calc($lamp-top + 3px);

// 阴影园
$circle-width: 50em;
$circle-height: 0.3 * $circle-width;
$circle-bottom: 5em;

// 光影圆锥体

$cone-offset: 0.5em;
$cone-around1: calc(
  $lamp-top + $lamp-height + $cone-offset + $circle-bottom +
    calc($circle-height / 2)
);
// $cone-height: max(calc(100vh - 21em), 39em);
$cone-height: max(calc(100vh - $cone-around1), $bg-height - $cone-around1);
$cone-top: $lamp-top + $lamp-height;

$cone-ratio: calc($lamp-width / $circle-width * 50%);
$cone-top-left-ratio: calc(50% - $cone-ratio);
$cone-top-right-ratio: calc(50% + $cone-ratio);

$cone-polygon: polygon(
  $cone-top-left-ratio 0,
  $cone-top-right-ratio 0,
  100% 100%,
  0 100%
);

// 圆球
$ball-width: 10em;
$ball-height: 10em;
$ball-bottom: 25em;

$circle2-width: 14em;
$circle2-height: 0.3 * $circle2-width;
$circle2-bottom: calc(
  $circle-bottom + calc($circle-height / 2) - calc($circle2-height / 2)
);

// 圆球圆锥光影
$cone2-bottom: calc($circle2-bottom + $circle2-height / 2);
$cone2-height: calc($ball-bottom + $ball-width / 2 - $cone2-bottom);
$cone2-ratio: calc($ball-width / $circle2-width * 50%);
$cone2-top-left-ratio: calc(50% - $cone2-ratio);
$cone2-top-right-ratio: calc(50% + $cone2-ratio);
$cone2-polygon: polygon(
  $cone2-top-left-ratio 0,
  $cone2-top-right-ratio 0,
  100% 100%,
  0 100%
);

$cone-blur: blur(100px);
$circle-blur: blur(2px);

$lamp-color: linear-gradient(to bottom, #727269 0% 80%, #c8b064 80% 100%);
@mixin _verticalAlign {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  @content;
}
@mixin _rotate-scene {
  transform-origin: bottom center;
  transform: rotateX(60deg);
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  .bg {
    @include mx.rect(100%, $bg-height, #000);
    min-height: 100vh;
    position: relative;
    perspective: 2000px;
    perspective-origin: bottom;
    .scene {
      @include _verticalAlign {
        bottom: 0;
      }
      @include _rotate-scene;
      @include mx.rect(100%, 100em, #000);
    }
    .spotlight {
      .lamp-cord {
        @include _verticalAlign {
          top: 0;
        }
        @include mx.rect(10px, calc(5em + 3px), #727269);
      }
      .lamp {
        @include _verticalAlign {
          top: 5em;
        }
        @include mx.rect(
          10em,
          3em,
          $lamp-color,
          50% 50% 50% 50% / 100% 100% 0 0
        );
      }
      .cone {
        @include _verticalAlign {
          top: 8em;
        }
        @include mx.rect(50em, $cone-height, #baba9624);
        clip-path: $cone-polygon;
      }
      .circle {
        @include _verticalAlign {
          bottom: 5em;
        }
        @include mx.rect(50em, 15em, #727269, 50%);
        filter: blur(2px);
      }
    }
  }

  .ball {
    @include _verticalAlign {
      bottom: 25em;
    }
    @include mx.rect(10em, 10em, null, 50%);
    background: radial-gradient(
          at 50% 25%,
          #fff 0 3%,
          #ffffffe0 5%,
          #ffffff57 10%,
          transparent 15% 100%
        )
        50% 0 / 150% 50% no-repeat,
      radial-gradient(circle at 50% 20%, #ffffff80, #00000057), #f00;
    animation: ball-animate 1.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate,
      highlight-animate 1.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
  }
  .shadow {
    .cone {
      @include _verticalAlign {
        bottom: $cone2-bottom;
      }
      @include mx.rect($circle2-width, $cone2-height, #4444444d);
      clip-path: $cone2-polygon;
      filter: $cone-blur;
      animation: cone2-animate 1.5s 0s cubic-bezier(0.4, 0, 1, 1) infinite
        alternate;
    }
    .circle {
      @include _verticalAlign {
        bottom: $circle2-bottom;
      }
      @include mx.rect($circle2-width, $circle2-height, #444, 50%);
      filter: $circle-blur;
      animation: circle2-animate 1.5s cubic-bezier(0.4, 0, 1, 1) infinite
        alternate;
    }
  }
}

@keyframes ball-animate {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(12.5em);
  }
}
@keyframes highlight-animate {
  0% {
    background-size: 150% 50%, 100% 100%, 100% 100%;
    background-position: 50% 0, 0 0, 0 0;
  }
  100% {
    background-size: 120% 40%, 100% 100%, 100% 100%;
    background-position: 50% -1%, 0 0, 0 0;
  }
}
@keyframes circle2-animate {
  from {
    width: $circle2-width;
    // height: $circle2-height;
    background-color: #444;
  }
  to {
    width: $ball-width;
    // height: $ball-height;
    background-color: #262626;
  }
}
@keyframes cone2-animate {
  from {
    height: $cone2-height;
    clip-path: polygon(
      $cone2-top-left-ratio 0,
      $cone2-top-right-ratio 0,
      100% 100%,
      0 100%
    );
  }
  to {
    height: calc($ball-height / 2);
    clip-path: polygon(
      $cone2-top-left-ratio 0,
      $cone2-top-right-ratio 0,
      $cone2-top-right-ratio 100%,
      $cone2-top-left-ratio 100%
    );
  }
}
